<template>
  <div class="alide-menu">
    <el-menu default-active="$router.path"
             class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             active-text-color="#ffd04b"
             router>
      <sub-menu :menu-list="menuList"></sub-menu>
    </el-menu>
  </div>
</template>

<script>
import SubMenu from './SubMenu'
import {getMenuList} from '../../../api/menu/menu'
export default {
  name: 'MenuComponent',
  components: {SubMenu},
  data () {
    return {
      activeIndex: '个人中心',
      menuList: []
    }
  },
  mounted () {
    this.init()
  },
  computed: {
    routers () {
      // console.log(this.$router.options)
      // this.$router.options获取路由列表
      return this.$router.options.routes[0].children
    }
  },
  methods: {
    /**
     * 初始化菜单
     */
    init: async function () {
      const promise = await getMenuList()
      console.log('获取菜单数据', promise)
      this.menuList = promise.data.menuList
    },
    /***
     * 打开的菜单
     * @param key
     * @param keyPath
     */
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
>>>
  .el-menu{
    border: none;
  }
.alide-menu{
  min-height: 700px;
  border-right: 1px solid #e6e6e6;
}
</style>
